<template>
	<view class="content">
		<view class="tophaderbg">
			<my-headerbg @instruct="handinstruct" :instruct="instruct" :imageshow="imageshow"></my-headerbg>
		</view>
		<scroll-view scroll-y="true" class="ScrollView">
			<image class="topdaohang" :src="proxy.serverimageUrl + 'shenqing/daohangye.png'" mode=""></image>
			<uni-forms label-position="left" border :model="form" :rules="rules" ref="formRef" label-width="140">
				<view class="formitem">
					<!-- 				<image class="topdaohang" src='../../static/applyfor/daohangye.png' mode=""></image> -->
					<uni-forms-item required label="会员头像" name="avatar">
						<up-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1"></up-upload>
					</uni-forms-item>

					<uni-forms-item required label="姓名" name="memberName">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入姓名"
							v-model="form.memberName" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item required label="性别" name="memberSex">
						<view class="radioBox">
							<view class="radioBox-left" @click="sexchange(1)">
								<view class="radio-round">
									<view class="radio-round-item" v-if="form.memberSex == 1">

									</view>
								</view>
								<view class="text">
									男
								</view>
							</view>
							<view class="radioBox-right" @click="sexchange(0)">
								<view class="radio-round">
									<view class="radio-round-item" v-if="form.memberSex == 0">

									</view>
								</view>
								<view class="text">
									女
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="年龄" name="memberBirthday" @tap="datetimeshow = true">
						<uni-easyinput :clearable="false" suffixIcon="right" primaryColor="#FFFFFF" type="text"
							v-model="form.memberBirthday" placeholder="请选择" disabled disableColor="#FFFFFFFFFFFF"
							:inputBorder="false"></uni-easyinput>

					</uni-forms-item>
					<uni-forms-item required label="民族" name="memberNation" @tap="pickershowchange(1)">
						<uni-easyinput :clearable="false" suffixIcon="right" primaryColor="#FFFFFF" type="text"
							v-model="form.memberNation" placeholder="请选择" disabled disableColor="#FFFFFF"
							:inputBorder="false"></uni-easyinput>
						<template #right>
							<up-icon name="arrow-right"></up-icon>
						</template>
					</uni-forms-item>
					<uni-forms-item required label="籍贯" name="memberHometown">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入籍贯"
							v-model="form.memberHometown" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item required label="党政" name="politicalLandscapetext" @tap="pickershowchange(2)">
						<uni-easyinput :clearable="false" suffixIcon="right" primaryColor="#FFFFFF" type="text"
							v-model="form.politicalLandscapetext" placeholder="请选择" disabled disableColor="#FFFFFF"
							:inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="其他党政" v-show="politicalLandscapetext == '其他政党'" name="otherPolitical">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入其他党政"
							v-model="form.otherPolitical" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="身份证号" name="idCard">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入身份证号"
							v-model="form.idCard" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required name="educationalLevel" style="padding: 0;">
						<view class="form-item">
							<view class="item-label">
								文化程度
							</view>
							<view class="item-btnBox">
								<view :class="[namenum == item.title ? 'btnitemact':'btnitem']"
									@click.stop="namechange(item)" v-for="(item,index) in educationdata" :key="index">
									{{item.title}}
								</view>
							</view>
						</view>
					</uni-forms-item>

					<up-datetime-picker @cancel="datecancel" @confirm="dateconfirm" :show="datetimeshow"
						:minDate="mindate" :maxDate="maxdate" v-model="datetimevalue" mode="date"></up-datetime-picker>
				</view>
				<view class="formitem" style="margin-top: 35rpx;padding-bottom: 20rpx;">
					<!-- <uni-forms border :model="form" :rules="rules" ref="formRef" label-width="140"> -->
					<uni-forms-item required label="工作单位" name="workUnit">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入工作单位"
							v-model="form.workUnit" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="职务" name="duties">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入职务"
							v-model="form.duties" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required name="employmentSituation">
						<view class="form-item">
							<view class="item-label">
								第六届拟任职情况
							</view>
							<view class="item-btnBox">
								<view :class="[Educationalnum == item.title ? 'btnitemact':'btnitem']"
									@click.stop="Educationalchange(item)" v-for="(item,index) in topname" :key="index">
									{{item.title}}
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item required name="mainDuties">
						<view class="form-item">
							<view class="topBox">
								<view class="topBox-label">
									现任社会主要职务
								</view>
								<view class="topBox-add" @tap="addchange">
									<image :src="proxy.serverimageUrl + 'shenqing/jia.png'" mode=""></image>
									<view class="topBox-text">
										添加
									</view>
								</view>
							</view>
							<view class="cardbox" v-for="(item,index) in form.mainDuties" :key="index">
								<view class="cardbox-left">
									<p class="p1">{{item.organization}}</p>
									<p class="p2">{{item.duties}}</p>
								</view>
								<view class="cardbox-right" @click="delmainDuties(item)">
									<image :src="proxy.serverimageUrl + 'shenqing/del.png'" mode=""></image>
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="手机" name="phone">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.phone"
							placeholder="请输入手机号码" :inputBorder="false"></uni-easyinput>

					</uni-forms-item>
					<uni-forms-item required label="办公电话" name="tel">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.tel"
							placeholder="请输入办公电话" :inputBorder="false"></uni-easyinput>

					</uni-forms-item>
					<uni-forms-item required label="传真" name="facsimile">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.facsimile"
							placeholder="请输入传真" :inputBorder="false"></uni-easyinput>

					</uni-forms-item>
					<uni-forms-item required label="电子邮箱" name="email">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.email"
							placeholder="请输入电子邮箱" :inputBorder="false"></uni-easyinput>

					</uni-forms-item>
					<uni-forms-item required @tap="showLocal = true" label="通信地址" name="communicationAddress">
						<uni-easyinput :clearable="false" suffixIcon="right" primaryColor="#FFFFFF" type="text"
							v-model="form.communicationAddress" placeholder="请选择 市/区/街道" disabled disableColor="#ffffff"
							:inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="详细地址" name="address">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.address"
							placeholder="请输入楼栋，门牌号" :inputBorder="false"></uni-easyinput>

					</uni-forms-item>
					<uni-forms-item required label="邮政编码" name="zipCode">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.zipCode"
							placeholder="请输入邮政编码" :inputBorder="false"></uni-easyinput>

					</uni-forms-item>

					<uni-forms-item required @tap="pickershowchange(3)" label="兴趣爱好" name="hobbiestext">
						<uni-easyinput :clearable="false" disabled primaryColor="#FFFFFF" type="text" v-model="form.hobbiestext"
							placeholder="可多选" suffixIcon="right" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="其他兴趣爱好" name="otherHobby">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.otherHobby"
							placeholder="请输入其他兴趣爱好" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>

					<uni-forms-item required label="秘书/助理姓名" name="secretary">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入姓名"
							v-model="form.secretary" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="秘书/助理手机" name="secretaryPhone">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" placeholder="请输入手机号"
							v-model="form.secretaryPhone" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<!-- <up-datetime-picker :show="datetimeshow" v-model="datetime" mode="date"></up-datetime-picker> -->
				</view>
			</uni-forms>
			<view style="height: 45rpx;background: #F4F5F8;">

			</view>
			<up-picker :show="pickershow" @cancel="pickershow = false" @confirm="pickershowConfirm" keyName="content"
				:columns="columns"></up-picker>
			<up-picker @cancel="showLocal = false" @close="showLocal = false" visibleItemCount='3' :show="showLocal"
				:columns="addressColumns" @confirm="localConfirm" title="请选择所在地" keyName="value" itemHeight="80"
				closeOnClickOverlay ref="uPickerRef" @change="changeHandler" :defaultIndex="defaultAddress"
				immediateChange></up-picker>
			<up-popup :customStyle='customStyle' :show="uppopupshow" :round="10" mode="center" @close="uppopupclose">
				<view class="title" style="margin-bottom: 42rpx;font-weight: 500;font-size: 36rpx;color: #2B2B2B;">
					添加社会职务
				</view>
				<uni-easyinput class="popinput" :clearable="false" :inputBorder="false" placeholder="组织名称"
					v-model="mainDutiesobj.organization"></uni-easyinput>
				<uni-easyinput :clearable="false" primaryColor="#FFFFFF" :inputBorder="false" placeholder="职务"
					v-model="mainDutiesobj.duties" @change="inputchange"></uni-easyinput>
				<view style="margin-top: 20rpx;">
					<up-button color="#2854B7" @click="addmainDuties" shape="circle" text="确定"></up-button>

				</view>
				<view @click="uppopupclose" style="margin-top: 20rpx;text-align: center;font-weight: 400;
font-size: 30rpx;
color: #2854B7;">
					取消
				</view>
			</up-popup>
			<up-popup closeable :customStyle='customStyle' :show="popupHobbyshow" :round="10" mode="bottom"
				@close="popupHobbyclose">
				<view class="form-item">
					<view class="item-btnBox">
						<view :class="[item.checked ? 'btnitemact':'btnitem']" @click.stop="hobbieschange(item)"
							v-for="(item,index) in GetConditiondata.hobbys" :key="index">
							{{item.content}}
						</view>
					</view>
				</view>
				<view class="" style="margin-top:20rpx">
					<up-button text="确定" @click="determinehobbies" color="#2854B7">
					</up-button>
				</view>
			</up-popup>
		</scroll-view>
		<up-modal :show="modalshow" showCancelButton @cancel="modelcancel" cancelText="坚持退出" confirmText='继续填写' @confirm="modalconfirm"
			:content='modalcontent'></up-modal>
		<view class="bottom-btn">
			<up-button text="下一步" @click="submit" color="#2854B7"></up-button>
		</view>
	</view>
</template>

<script setup>
	import address from '../address.js';
	import {
		getCondition,
		saveMember,
		saveDuties,
		dutiesList,
		delDuties,
		getMemberByOpenid,
		modifyMember
	} from '../../utils/api.js'
	import BASE_URL from '@/utils/env.js'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const openid = uni.getStorageSync('openid')
	const mid = uni.getStorageSync('mid')
	const memberNo = uni.getStorageSync('memberNo')
	onLoad(() => {
		GetCondition()
		getMember()
		getdutiesList()
	})
	onReady(() => {
		formRef.value.setRules(rules);
	})
	/*查询会员*/
	const getMember = () => {
		let params = {
			openid,
			type: 1
		}
		getMemberByOpenid(params).then(res => {
			if (res.code == 200) {
				form.value = res.data
				form.value.hobbiestext = []
				form.value.hobbys = res.data.hobbys
				namenum.value = res.data.educationalLevel
				Educationalnum.value = res.data.employmentSituation
				form.value.memberNation = res.data.memberNations.content
				form.value.politicalLandscapetext = res.data.politicalLandscapes.content
				fileList.value.push({
					url: res.data.avatar
				})
				GetConditiondata.value.hobbys.map((item, index) => {
					res.data.hobbys.map(t=>{
						if (t == item.cid) {
							form.value.hobbiestext.push(item.content)
							item.checked = true
						}
					})
					
				})
				getdutiesList()
			}
		})
	}
	const modalshow = ref(false)
	const modalcontent = ref('信息未保存是否继续填写')
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				modalshow.value = true
				break;
		}
	}
	const modalconfirm = () => {
		submit()
	}
	const modelcancel = () => {
		uni.switchTab({
			url: '/pages/Mypage/index'
		})
	}
	/*新增会员*/
	const addsaveMember = (data) => {
		if (mid) {
			modifyMember(data).then(res => {
				if (res.code == 200) {
					setTimeout(() => {
						uni.showToast({
							title: '添加成功',
							duration: 1000,
							icon: 'success'
						})
						setTimeout(() => {
							uni.hideToast();
							uni.navigateTo({
								url: '/subpages/applyfor/Basicinformation'
							})
						}, 1000)
					}, 0)
				}
			})
		}

	}
	const getdutiesList = () => {
		let params = {
			openid
		}
		dutiesList(params).then(res => {
			form.value.mainDuties = res.data
		})
	}
	const popupHobbyshow = ref(false)
	const inputchange = () => {}
	const customStyle = {
		'width': '600rpx',
		'height': '620rpx',
		'paddingTop': '68rpx',
		'paddingLeft': '45rpx',
		'paddingRight': '45rpx',
		'paddingBottom': '20rpx'
	}
	const mainDutiesobj = ref({
		organization: '',
		duties: '',
		openid,
		memberNo
	})
	/*添加职务*/
	const addmainDuties = () => {
		if (mainDutiesobj.value.organization && mainDutiesobj.value.duties) {
			saveDuties(mainDutiesobj.value).then(res => {
				if (res.code == 200) {
					setTimeout(() => {
						uni.showToast({
							title: '添加成功',
							duration: 1000,
							icon: 'success'
						})
						setTimeout(() => {
							uni.hideToast();
							uppopupclose()
							getdutiesList()
						}, 1000)
					}, 0)
				} else {
					uni.showToast({
						title: '添加失败',
						duration: 1000,
						icon: 'error'
					})
					uppopupclose()
					getdutiesList()
				}
			})
		} else {
			uni.showToast({
				title: '请输入内容'
			})
		}
	}
	/*删除主要职务*/
	const delmainDuties = (item) => {
		delDuties(item.did).then(res => {
			setTimeout(() => {
				uni.showToast({
					title: '删除成功',
					duration: 1000,
					icon: 'success'
				})
				setTimeout(() => {
					uni.hideToast();
					getdutiesList()
				}, 1000)
			}, 0)
		})
	}
	// 使用 ref 创建响应式引用  
	const formRef = ref(null);
	/*添加主要职务弹框*/
	const uppopupshow = ref(false)
	const addchange = () => {
		uppopupshow.value = true
	}
	const uppopupclose = () => {
		mainDutiesobj.value.organization = ''
		mainDutiesobj.value.duties = ''
		uppopupshow.value = false
	}
	/*兴趣爱好弹框*/
	const popupHobbyclose = () => {
		popupHobbyshow.value = false
		GetConditiondata.value.hobbys.map(item => {
			item.checked = false
		})
	}
	const hobbieschange = (item) => {
		item.checked = !item.checked
	}
	// formRef.value.setRules(rules);
	// 提交方法  
	function submit() {
		let params = {
			...form.value,
			status: 0,
			mid
		}
		formRef.value.validate().then(valid => {
			if (valid) {
				addsaveMember(params)
				modalshow.value = false
			} else {
				// uni.$u.toast('校验失败')
				modalshow.value = false
			}
		}).catch((err) => {
			// 处理验证错误  
			modalshow.value = false
			console.log('表单数据信息：', err);
			// uni.$u.toast(err,'校验失败le ')
		});
	}
	/*学历数据*/
	const educationdata = ref([{
			title: '高中',
			id: 1
		},
		{
			title: '中专',
			id: 2
		},
		{
			title: '大学专科',
			id: 3
		},
		{
			title: '大学本科',
			id: 4
		},
		{
			title: '硕士研究生',
			id: 5
		},
		{
			title: '博士',
			id: 6
		}
	])
	/*上一届职务数据*/
	const topname = ref([{
			title: '会长',
			id: 7
		},
		{
			title: '副会长',
			id: 8
		},
		{
			title: '理事',
			id: 9
		},
		{
			title: '会员',
			id: 10
		}
	])
	/*上一届拟职点击事件*/
	const Educationalnum = ref(null)
	const Educationalchange = (item) => {
		form.value.employmentSituation = item.title
		Educationalnum.value = item.title
	}
	/*学历点击事件*/
	const namenum = ref(null)
	const namechange = (item) => {
		form.value.educationalLevel = item.title
		namenum.value = item.title
	}
	/*请求接口查询数据*/
	const GetConditiondata = ref({})
	const GetCondition = () => {
		getCondition().then(res => {
			res.data.hobbys.map(item => {
				item.checked = false
			})
			GetConditiondata.value = res.data
			console.log(GetConditiondata.value)
		})
	}
	//*弹出框显示/
	const pickershow = ref(false)
	const columns = ref([])
	const pickershowchange = (type) => {
		columns.value = []
		if (type == 1) {
			pickershow.value = true
			columns.value.push(GetConditiondata.value.memberNations)
		} else if (type == 2) {
			pickershow.value = true
			columns.value.push(GetConditiondata.value.governments)
		} else if (type == 3) {
			form.value.hobbys = []
			form.value.hobbiestext = []
			popupHobbyshow.value = true
			// columns.value.push(GetConditiondata.value.hobbys)
		}
	}
	/*选择兴趣爱好*/
	const determinehobbies = () => {
		form.value.hobbys = []
		GetConditiondata.value.hobbys.map(item => {
			if (item.checked) {
				form.value.hobbys.push(item.cid)
				form.value.hobbiestext.push(item.content)
				popupHobbyshow.value = false
			}
		})
		if (form.value.hobbys.length == 0) {
			uni.showToast({
				icon: 'error',
				title: '请至少选择一项'
			})
			return
		}
	}
	/*弹框确定*/
	const pickershowConfirm = (e) => {
		if (e.value[0].groups == 6) {
			form.value.politicalLandscapetext = e.value[0].content
			form.value.politicalLandscape = e.value[0].cid
			formRef.value.validateField('politicalLandscape')
		} else if (e.value[0].groups == 5) {
			form.value.memberNation = e.value[0].content
		}

		pickershow.value = false
	}
	const imageshow = ref(0)
	/*选择地址触发*/
	const showLocal = ref(false);
	const defaultAddress = reactive([])
	const addressData = reactive([
		...address,
	])
	const showpiker = () => {
		showLocal.value = true
	}
	//省的数组
	const provinceData = address.map(e => {

		return {
			value: e.value,
			code: e.code
		} //这里可以直接return e.name  这里我是要用到code所以才用对象包起来的 下面的市 区 也一样
	})
	//市的数组
	const cityData = address.map(e => {
		const arr = []
		arr.push(
			e.children.map(c => {
				return {
					value: c.value,
					code: c.code
				}

			})
		)
		return arr
	})
	//区的数组
	const childrenData = address.map(e => {
		const arr = []
		arr.push(
			e.children.map(c =>
				c.children.map(d => {
					return {
						value: d.value,
						code: d.code
					}
				})
			)
		)
		return arr
	})
	const arr = [provinceData, cityData[0][0], childrenData[0][0][0]]
	const addressColumns = reactive([
		...arr
	])
	//将得到的3个数组 的第一个市的所有数据赋值 作为初始数据
	const uPickerRef = ref(null)
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			indexs,
			index,
		} = e;
		//如果改变的是第一列
		if (columnIndex === 0) {
			const children1 = addressData[index].children.map(e => {
				return {
					value: e.value,
					code: e.code
				}
			})
			uPickerRef.value.setColumnValues(1, children1)
			//更换 第二列数据
			const children2 = addressData[index].children[indexs[1]].children.map(e => {
				return {
					value: e.value,
					code: e.code
				}
			})
			uPickerRef.value.setColumnValues(2, children2)
			//更换 第三列数据
		}
		if (columnIndex === 1) {
			//如果改变的是第二列
			const children3 = addressData[indexs[0]].children[indexs[1]].children.map(e => {
				return {
					value: e.value,
					code: e.code
				}
			})
			uPickerRef.value.setColumnValues(2, children3)
			//更换 第三列数据
		}
	};

	const localConfirm = (e) => {

		form.value.communicationAddress = e.value[0].value + '-' + e.value[1].value + '-' + e.value[2].value
		showLocal.value = false;
	};
	/*时间组件的数据 显示*/
	const datetimeshow = ref(false)
	const datetimevalue = ref(Date.now())
	const mindate = ref(new Date('1975-01-01').getTime())
	const maxdate = ref(new Date('2030-12-30').getTime())

	function timestampToDateString(timestamp) {
		const date = new Date(timestamp);
		let year = date.getFullYear()
		let month = (date.getMonth() + 1).toString().padStart(2, 0)
		let day = date.getDate();
		return year + '-' + month + '-' + day
	}
	const datecancel = () => {
		datetimeshow.value = false
	}
	const dateconfirm = (e) => {
		form.value.memberBirthday = timestampToDateString(e.value)
		datetimeshow.value = false
	}
	/*性别切换*/
	const sexchange = (type) => {
		form.value.memberSex = type
	}
	/*创建form表单数据*/
	const form = ref({
		memberName: '',
		// avatar: '',
		memberSex: 1,
		memberBirthday: '',
		memberNation: '',
		memberHometown:'',
		politicalLandscape: '',
		politicalLandscapetext: '',
		idCard: '',
		educationalLevel: '',
		workUnit: '',
		duties: '',
		mainDuties: [{
			organization: '市工商联会(总商会)',
			duties: '副会长'
		}],
		phone: '',
		tel: '',
		facsimile: '',
		email: '',
		communicationAddress: '',
		employmentSituation: '',
		address: '',
		zipCode: '',
		hobbys: [],
		hobbiestext: [],
		secretary: '',
		secretaryPhone: '',
		otherHobby: '',
		otherPolitical: '',
		openid,
		fileList,
		mid
	});
	// 校验规则  
	const rules = {
		avatar: {
			rules: [{
				required: true,
				errorMessage: '请上传头像'

			}]
		},
		memberName: {
			rules: [{
				required: true,
				errorMessage: '请输入姓名'

			}]
		},
		memberHometown: {
			rules: [{
				required: true,
				errorMessage: '请输入籍贯'
		
			}]
		},
		memberSex: {
			rules: [{
				required: true,
				errorMessage: '请选择性别'

			}]
		},
		memberBirthday: {
			rules: [{
				required: true,
				errorMessage: '请选择出生日期'

			}]
		},
		memberNation: {
			rules: [{
				required: true,
				errorMessage: '请选择民族',

			}],
		},
		politicalLandscapetext: {
			rules: [{
				required: true,
				type: 'string',
				errorMessage: '请选择党政',

			}],
		},
		tel: {
			rules: [{
				required: true,
				errorMessage: '请输入办公电话',

			}],
		},
		idCard: {
			rules: [{
					required: true,
					errorMessage: '请输入身份证号',

				},
				// {
				// 	validateFunction: function(rule, value, data, callback) {
				// 		let iphoneReg = (
				// 			/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				// 		); //
				// 		if (!iphoneReg.test(value)) {
				// 			callback('身份证格式不正确，请重新填写')
				// 		}
				// 	}
				// },
			],
		},
		educationalLevel: {
			rules: [{
				required: true,
				errorMessage: '请选择文化程度',

			}],
		},
		workUnit: {
			rules: [{
				required: true,
				errorMessage: '请输入工作单位',

			}],
		},
		duties: {
			rules: [{
				required: true,
				errorMessage: '请输入职务',

			}],
		},
		employmentSituation: {
			rules: [{
				required: true,
				errorMessage: '请选择拟任职情况',

			}],
		},
		mainDuties: {
			rules: [{
				required: true,
				errorMessage: '请输入现任主要职务',

			}],
		},
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入电话号',

			}]
		},
		facsimile: {
			rules: [{
				required: true,
				errorMessage: '请输入传真',

			}],
		},
		email: {
			rules: [{
				required: true,
				errorMessage: '请输入电子邮箱',

			}],
		},
		communicationAddress: {
			rules: [{
				required: true,
				errorMessage: '请选择通信地址',

			}],
		},
		address: {
			rules: [{
				required: true,
				errorMessage: '请输入详细地址',

			}]
		},
		zipCode: {
			rules: [{
				required: true,
				errorMessage: '请输入邮政编码',

			}],
		},
		hobbiestext: {
			rules: [{
					required: true,
					errorMessage: '请选择兴趣爱好',

				},
				{
					validateFunction: function(rule, value, data, callback) {
						if (value.length < 2) {
							callback('请至少选择两个兴趣爱好')
						}
						return true
					}
				}
			],
		},
		secretary: {
			rules: [{
				required: true,
				errorMessage: '请输入助理/秘书姓名',

			}],
		},
		secretaryPhone: {
			rules: [{
				required: true,
				errorMessage: '请输入助理/秘书电话',

			}],
		}
	}
	const fileList = ref([]);

	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				errorMessage: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				errorMessage: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: BASE_URL + '/common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						const resdata = JSON.parse(res.data)
						form.value.avatar = resdata.url
						resolve(resdata.url)
					}, 1000);
				},
			});
		});
	};
</script>

<style scoped lang="scss">
	.content {
		background: #F4F5F8;
		width: 750rpx;
		height: 100vh;
		padding-top: 284rpx;

		::v-deep .u-popup__content {
			.form-item {
				// margin-top: 42rpx;
				width: 660rpx;

				.item-btnBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.btnitem {
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 200rpx;
						height: 82rpx;
						background: #F4F5F8;
						border-radius: 4rpx;
						border: 1px solid #F4F5F8;
					}

					.btnitemact {
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 200rpx;
						height: 82rpx;
						background: #E6EEFF !important;
						border: 1px solid #2854B7 !important;
						color: #2854B7 !important;
					}
				}
			}

			.uni-easyinput {
				margin-top: 30rpx;
				border-radius: 20rpx;

				.uni-easyinput__content {
					background-color: #F4F5F8 !important;
					height: 104rpx;
				}

			}
		}

		.tophaderbg {
			position: absolute;
			top: 0;
			z-index: 2;
		}

		.ScrollView {
			position: relative;
			z-index: 3;
			box-sizing: border-box;
			padding: 0 40rpx;
			height: calc(100vh - 435rpx);

			.topdaohang {
				width: 100%;
				height: 150rpx;
				margin-bottom: -24rpx;
			}

			::v-deep .uni-forms {
				.uni-forms-item {
					.uni-forms-item__content {
						.uni-easyinput {
							.uni-easyinput__content {
								text-align: right;
								background-color: #FFFFFF !important;

								.uni-icons {
									font-size: 28rpx !important;
								}
							}
						}

						.uni-forms-item__error {
							text-align: right;
							left: -20rpx !important;
							right: 20rpx !important;
						}
					}
				}
			}

			.formitem {
				background: #FFFFFF;
				padding: 47rpx 36rpx;
				border-radius: 20rpx;



				.form-item {
					// margin-top: 42rpx;
					width: 560rpx;

					.cardbox {
						margin-top: 29rpx;
						width: 560rpx;
						height: 160rpx;
						background: #F4F5F8;
						border-radius: 16rpx;
						display: flex;
						padding: 44rpx 35rpx;
						align-items: center;
						justify-content: space-between;

						.cardbox-left {
							.p1 {
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 30rpx;
								color: #252525;
							}

							.p2 {
								margin-top: 15rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 30rpx;
								color: #2854B7;
							}
						}

						.cardbox-right {
							image {
								width: 35rpx;
								height: 34rpx;
							}
						}
					}

					.topBox {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.topBox-label {
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 30rpx;
							color: #252525;
						}

						.topBox-add {
							display: flex;
							align-items: center;

							image {
								width: 28rpx;
								height: 28rpx;
							}

							.topBox-text {
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 28rpx;
								color: #2854B7;
							}
						}
					}

					.item-label {
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #252525;
					}

					.item-btnBox {
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-wrap: wrap;

						.btnitem {
							margin-top: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 185rpx;
							height: 82rpx;
							background: #F4F5F8;
							border-radius: 4rpx;
						}

						.btnitemact {
							margin-top: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 185rpx;
							height: 82rpx;
							background: #E6EEFF !important;
							border: 1px solid #2854B7 !important;
							color: #2854B7 !important;
						}
					}
				}

				.radioBox {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.radio-round {
						width: 34rpx;
						height: 34rpx;
						border-radius: 50%;
						border: 2rpx solid #2854B7;
						display: flex;
						align-items: center;
						justify-content: center;

						.radio-round-item {
							width: 20rpx;
							height: 20rpx;
							background: #2854B7;
							border-radius: 50%;
						}
					}

					.text {
						margin-left: 16rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #252525;
					}

					.radioBox-left {
						display: flex;
						align-items: center;

					}

					.radioBox-right {
						display: flex;
						align-items: center;
						margin-left: 50rpx;
					}
				}

				::v-deep .u-upload__wrap {
					justify-content: flex-end;
				}

				::v-deep .u-input__content__field-wrapper__field {
					text-align: right !important;
				}
			}
		}

		.bottom-btn {
			position: fixed;
			bottom: 40rpx;
			left: 40rpx;
			// z-index: 10;
			width: 670rpx;
			height: 110rpx;
			border-radius: 20rpx;
		}
	}
</style>